WindowOverlay: animate the close button together with the border

Since the introduction of overlay hover borders, there has a been
a timing disconnection between hiding the border and button, and
this creates noise and reduces the effect of the window+overlay
as a single unit.
Solve that by animating the close button too, so that the two actors
are shown and hidden always at the same time.
Also, consolidate the code to make it clear to future authors that
those two items need to stay coordinated.

https://bugzilla.gnome.org/show_bug.cgi?id=688966

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index c2583ed84bc715840a4f5f84e1b72de7b69085f3..ef7c9d62a0978fd111873614d55faacc257dc6f1 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -500,11 +500,9 @@ const WindowOverlay = new Lang.Class({
 
     hide: function() {
         this._hidden = true;
-        this.closeButton.hide();
         this.title.hide();
-        this.title.remove_style_pseudo_class('hover');
 
-        this.border.hide();
+        this.hideCloseButton();
     },
 
     show: function() {
@@ -664,7 +662,13 @@ const WindowOverlay = new Lang.Class({
 
     _animateVisible: function() {
         this._parentActor.raise_top();
+
         this.closeButton.show();
+        this.closeButton.opacity = 0;
+        Tweener.addTween(this.closeButton,
+                         { opacity: 255,
+                           time: CLOSE_BUTTON_FADE_TIME,
+                           transition: 'easeOutQuad' });
 
         this.border.show();
         this.border.opacity = 0;
@@ -676,6 +680,22 @@ const WindowOverlay = new Lang.Class({
         this.title.add_style_pseudo_class('hover');
     },
 
+    _animateInvisible: function() {
+        this.closeButton.opacity = 255;
+        Tweener.addTween(this.closeButton,
+                         { opacity: 0,
+                           time: CLOSE_BUTTON_FADE_TIME,
+                           transition: 'easeInQuad' });
+
+        this.border.opacity = 255;
+        Tweener.addTween(this.border,
+                         { opacity: 0,
+                           time: CLOSE_BUTTON_FADE_TIME,
+                           transition: 'easeInQuad' });
+
+        this.title.remove_style_pseudo_class('hover');
+    },
+
     _onEnter: function() {
         // We might get enter events on the clone while the overlay is
         // hidden, e.g. during animations, we ignore these events,
@@ -695,18 +715,10 @@ const WindowOverlay = new Lang.Class({
 
     _idleToggleCloseButton: function() {
         this._idleToggleCloseId = 0;
-        if (!this._windowClone.actor.has_pointer &&
-            !this.closeButton.has_pointer) {
-            this.closeButton.hide();
-
-            this.border.opacity = 255;
-            Tweener.addTween(this.border,
-                             { opacity: 0,
-                               time: CLOSE_BUTTON_FADE_TIME,
-                               transition: 'easeInQuad' });
 
-            this.title.remove_style_pseudo_class('hover');
-        }
+        if (!this._windowClone.actor.has_pointer &&
+            !this.closeButton.has_pointer)
+            this._animateInvisible();
 
         return false;
     },